<template>
  <div class="app-container">
    <div :class="['filter-container','open']" style="height:55px!important">

      <!-- 展开状态下的筛选框 -->
      <el-form ref="form" :inline="true" :model="form" label-width="70px">
        <el-form-item label="表名称">
          <el-input v-model="form.name" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="数据库">
          <el-select v-model="form.dbId">
            <el-option v-for="item in sortOptions" :key="item.id" :label="item.dbName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit-outline" @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button class="filter-item" type="primary" style="margin-bottom: 15px;" @click="onDataSourceAdd">
      新增
    </el-button>
    <div class="table-container">
        <el-table
          v-loading="listLoading"
          height="calc(100vh - 260px)"
          :data="tableLists"
          border
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="表类型" align="center">
            <template slot-scope="{row}">
             <span>{{ row.type===1?"单表":row.type===2?"主表":row.type===3?"附表":"" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="表名称" align="center" prop="name">
          </el-table-column>
          <el-table-column label="表描述" align="center" prop="remark">
          </el-table-column>
          <el-table-column label="版本" align="center" prop="version">
          </el-table-column>
          <el-table-column label="同步状态" align="center">
            <template slot-scope="{row}">
              <span :style="{color:row.sync?'rgba(15,64,245,1)':'red'}">{{ row.sync?"已同步":"未同步" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="{row}">
              <span>{{ row.create_Time}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleLook(row)">
                查看
              </el-button>
              <el-button type="primary" size="mini" @click="handleUpdate(row)" style="margin-right:10px">
                编辑
              </el-button>
              <el-dropdown @command="(command)=>handleCommand(command,row)">
                <el-button type="primary">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">同步数据库</el-dropdown-item>
                    <el-dropdown-item command="b">复制表</el-dropdown-item>
                    <el-dropdown-item command="c">删除</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <pagination v-show="total>0" :total="total" :page.sync="form.page" :limit.sync="form.limit" @pagination="getList" />

    <el-dialog
      :title="datasourceTitle"
      :visible.sync="datasourceDlgShow"
      v-if="datasourceDlgShow"
      width="70%"
    >
    <!-- :style="{'pointer-events': isDisabled?'none':'auto'}" -->
      <el-form
        ref="datasourceForm"
        :model="datasourceFormData"
        :rules="datasourceRule"
        label-width="120px"
        class="dialogClass"
      >
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple">
           <el-form-item label="表名" prop="table.name">
             <el-input v-model.trim="datasourceFormData.table.name" placeholder="请输入表名" clearable :disabled="isDisabled" />
           </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="表描述" prop="table.remark">
               <el-input v-model.trim="datasourceFormData.table.remark" placeholder="请输入表描述" clearable :disabled="isDisabled" />
            </el-form-item>
        </div></el-col>
       <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="表类型" prop="table.type">
            <el-select
                v-model="datasourceFormData.table.type"
                clearable 
                :disabled="isDisabled"
            >
                <el-option
                v-for="item in tablechangeLists"
                :key="item.code"
                :label="item.label"
                :value="item.code"
                />
            </el-select>
            </el-form-item>
       </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
             <el-form-item label="主键策略" prop="table.primaryKeyStrategy">
                <el-select
                    v-model="datasourceFormData.table.primaryKeyStrategy"
                    clearable 
                    :disabled="isDisabled"
                >
                    <el-option
                    v-for="item in zujianLists"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                    />
                </el-select>
                </el-form-item>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="数据库" prop="table.dbId">
                <el-select
                    v-model="datasourceFormData.table.dbId"
                    clearable 
                    :disabled="isDisabled"
                >
                    <el-option
                    v-for="item in sortOptions"
                    :key="item.id"
                    :label="item.dbName"
                    :value="item.id"
                    />
                </el-select>
                </el-form-item>
        </div></el-col>
        </el-row>
      
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <div v-show="!isDisabled">
            <el-button type="primary" @click="handleAdd">
               新增
            </el-button>
            <el-button type="danger" @click="handleDelete">
                删除
            </el-button>
        </div>
        
        <el-tab-pane label="数据库属性" name="dbAttribute">
            <el-table
                height="324"
                :data="datasourceFormData.fieldList"
                border
                highlight-current-row
                style="width: 100%;margin-top:15px"
                class="elTablecLASS"
                @selection-change="selectionchange"
                >
                <el-table-column
                    type="selection"
                    width="55"
                    :selectable="selectable"
                    >
                </el-table-column>
                <el-table-column
                    type="index"
                    label="#"
                    align="center"
                    width="55">
                </el-table-column>
                <el-table-column label="字段名称" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'fieldList.'+$index+'.name'" :rules="[{ required: true, message: '请输入表描述', trigger: 'blur' }]">
                          <el-input v-model.trim="row.name" placeholder="请输入表描述" :disabled="row.name==='id'||isDisabled" clearable />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="字段备注" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'fieldList.'+$index+'.remark'" :rules="[{ required: true, message: '请输入字段备注', trigger: 'blur' }]">
                          <el-input v-model.trim="row.remark" placeholder="请输入字段备注" :disabled="row.name==='id'||isDisabled" clearable />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="字段长度" align="center">
                     <template slot-scope="{row,$index}">
                        <el-form-item :prop="'fieldList.'+$index+'.length'" :rules="[{ required: true, message: '请输入字段长度', trigger: 'blur' }]">
                          <el-input v-model.trim="row.length" placeholder="请输入字段长度" :disabled="row.name==='id'||isDisabled" clearable />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="小数点" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'fieldList.'+$index+'.decimals'" :rules="[{ required: true, message: '请输入小数点后几位', trigger: 'blur' }]">
                          <el-input v-model.trim="row.decimals" placeholder="请输入小数点后几位" :disabled="row.name==='id'||isDisabled" clearable />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="默认值" align="center">
                    <template slot-scope="{row}">
                        <el-form-item>
                          <el-input v-model.trim="row.defaultValue" placeholder="请输入默认值" :disabled="row.name==='id'||isDisabled" clearable />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="字段类型" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'fieldList.'+$index+'.type'" :rules="[{ required: true, message: '请选择字段类型', trigger: 'change' }]">
                          <el-select
                                v-model="row.type"
                                placeholder="请选择字段类型"
                                :disabled="row.name==='id'||isDisabled"
                                clearable
                                @change="(value)=>handleChange(value,row)"
                            >
                                <el-option
                                v-for="item in typeLists"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="主键" align="center" width="50">
                    <template slot-scope="{row}">
                        <el-checkbox v-model="row.primaryKey" :disabled="row.name==='id'||isDisabled"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="允许空值" align="center" width="80">
                    <template slot-scope="{row}">
                        <el-checkbox v-model="row.allowNull" :disabled="row.name==='id'||isDisabled"></el-checkbox>
                    </template>
                </el-table-column>
                </el-table>
        </el-tab-pane>
        <el-tab-pane label="索引" name="index">
          <el-table
                height="324"
                :data="datasourceFormData.indexList"
                border
                highlight-current-row
                style="width: 100%;margin-top:15px"
                class="elTablecLASS"
                @selection-change="selectionchange"
                >
                <el-table-column
                    type="selection"
                    width="55"
                    >
                </el-table-column>
                <el-table-column
                    type="index"
                    label="#"
                    align="center"
                    width="55">
                </el-table-column>
                <el-table-column label="索引名称" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'indexList.'+$index+'.name'" :rules="[{ required: true, message: '请输入索引名称', trigger: 'blur' }]">
                          <el-input v-model.trim="row.name" placeholder="请输入索引名称" clearable :disabled="isDisabled" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="索引栏位" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'indexList.'+$index+'.filedName'" :rules="[{ required: true, message: '请选择索引栏位', trigger: 'change' }]">
                          <el-select
                                v-model="row.filedName"
                                placeholder="请选择索引栏位"
                                clearable
                                multiple
                                :disabled="isDisabled"
                            >
                                <el-option
                                v-for="item in indexLanlists"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="索引类型" align="center">
                    <template slot-scope="{row,$index}">
                        <el-form-item :prop="'indexList.'+$index+'.type'" :rules="[{ required: true, message: '请选择索引类型', trigger: 'change' }]">
                          <el-select
                                v-model="row.type"
                                placeholder="请选择索引类型"
                                clearable 
                                :disabled="isDisabled"
                            >
                                <el-option
                                v-for="item in indexSelelists"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code"
                                />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                </el-table>
        </el-tab-pane>
    </el-tabs>
    </el-form>
      <div slot="footer" class="dialog-footer" v-show="!isDisabled">
        <el-button @click="datasourceDlgShow=false">关闭</el-button>
        <el-button type="primary" @click="onDatasourceSave">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogdbVisible" :visible.sync="dialogdbVisible" width="20%" title="同步数据库">
       <div>
        <el-radio v-model="dbradio" :label="0">普通同步（保留表数据）</el-radio>
        <br />
        <el-radio v-model="dbradio" :label="1">强制同步（删除表，重新生成）</el-radio>
       </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogdbVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleDB">
          开始同步
        </el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogcpoyVisible" :visible.sync="dialogcpoyVisible" width="25%" title="复制表">
       <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="120px">
        <el-form-item
            label="请输入新表名："
            prop="name"
            :rules="[
            { required: true, message: '请输入新表名'}
            ]"
        >
            <el-input v-model="numberValidateForm.name" autocomplete="off"></el-input>
        </el-form-item>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcpoyVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleCopy">
          复制
        </el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { tableconfiginfo,tableconfigcopy,tableconfigfindPage,datasourceLists,tableconfigsyncTable,tableconfigupdate,tablesave,tableconfigdelete } from '@/api/article'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 分页组件
export default {
  name: 'databaseTable',
  components: { Pagination },
  directives: { waves }, // 指令

  data() {
    return {
      indexSelelists:[
        {
          code:"normal",
          label:"normal"
        },
        {
          code:"unique",
          label:"unique"
        },
      ],
        typeLists:[
            {
               code:"Varchar",
               label:"Varchar"
            },
            {
               code:"bigint",
               label:"bigint"
            },
            {
               code:"Int",
               label:"Int"
            },
            // {
            //    code:"Double",
            //    label:"Double"
            // },
            {
               code:"Date",
               label:"Date"
            },
            {
               code:"Datetime",
               label:"Datetime"
            },
            // {
            //    code:"Bigdecimal",
            //    label:"Bigdecimal"
            // },
            {
               code:"Text",
               label:"Text"
            },
            {
               code:"Blob",
               label:"Blob"
            },
        ],
        activeName: 'dbAttribute',
        zujianLists:[
            {
                code:1,
                label:"主键自增"
            }
        ],
        tablechangeLists:[
            {
                code:1,
                label:"单表"
            }
        ],
      numberValidateForm:{
        id:"",
        name:""
      },
      dialogcpoyVisible:false,
      dbradio:0,
      lineId:0,
      tableLists:[],
      sortOptions:[],
      dbform:{
        dbName:"",
        characterType:"utf8"
      },
      rules:{
          dbName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        // characterType: [
        //   { required: true, message: '不能为空', trigger: 'change' }
        // ],
      },
      dialogdbVisible:false,
      groupData: [],
      isDisabled: false,
      form: {
        name: '',
        dbId:"",
        page: 1,
        limit: 20
      },
      list: [], // 表格数据
      total: 0, // 总条数
      listLoading: true, // 表格加载数据时的 loading
      importanceOptions: [
        {
          code: "utf8",
          name: "utf8"
        },
        {
          code: "utf8mb4",
          name: "utf8mb4"
        }
      ],
      datasourceTitle: '新建连接',
      datasourceDlgShow: false,
      datasourceFormData: {
        table:{
        },
        fieldList:[],  
        indexList:[]
      },
      datasourceRule: {
        'table.name': [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        'table.remark': [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        'table.type': [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        'table.primaryKeyStrategy': [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        'table.dbId': [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      oracleConnTypeList: [{
        lab: '服务名',
        val: 1
      }, {
        lab: 'SID',
        val: 2
      }],
      oracleRoleList: [{
        lab: 'default',
        val: ''
      }, {
        lab: 'SYSDBA',
        val: 1
      }, {
        lab: 'SYSOPER',
        val: 2
      }],
      seleteLists:[],
      indexLists:[]
    }
  },
  computed:{
      indexLanlists(){
        return this.datasourceFormData.fieldList.map(item=>({code:item.name,label:item.name}))
      }
  },
  async mounted() {
    // await this.getUserList()
    this.getList()
    this.datasourceLists()
    
  },
  methods: {
    handleChange(value,row){
       if(value==="Varchar"){
         row.length=200
       }else{
         row.length=0
       }
    },
    selectable(row,index){
       return index!==0
    },
    selectionchange(value){
      if(this.activeName==="dbAttribute"){
         this.seleteLists=value
      }else{
        this.indexLists=value
      }
      console.log(this.seleteLists,this.indexLists,600)   
    },
    handleClick(tab, event) {
        console.log(this.activeName);
    },
    handleAdd() {
      if(this.activeName==="dbAttribute"){
         this.datasourceFormData.fieldList.push({
          name:"",
          remark:"",
          length:200,
          decimals:0,
          defaultValue:"",
          type:"Varchar",
          primaryKey:false,
          allowNull:true,
          onlyId:this.algorithm()
        })
      }else{
          this.datasourceFormData.indexList.push({
            name:"",
            filedName:[],
            filed:"",
            type:"normal",
            onlyId:this.algorithm()
        })
      }
    },
    handleDelete(){
      if(this.activeName==="dbAttribute"){
        if(!this.seleteLists.length){
           this.$message({
              message: '请选择要删除的数据',
              type: 'warning'
            })
            return
        }else{
          this.$confirm(`确定要进行删除操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                this.seleteLists.forEach(iten=>{
                    if(iten.onlyId){
                        //this.datasourceFormData.fieldList=this.datasourceFormData.fieldList.filter(v=>v.onlyId!==iten.onlyId)
                        const index=this.datasourceFormData.fieldList.findIndex(v=>v.onlyId===iten.onlyId)
                        if(index>=0){
                          this.datasourceFormData.fieldList.splice(index,1)
                        }
                    }
                    if(iten.id){
                      //this.datasourceFormData.fieldList=this.datasourceFormData.fieldList.filter(v=>v.id!==iten.id)
                        const index=this.datasourceFormData.fieldList.findIndex(v=>v.id===iten.id)
                        if(index>=0){
                          this.datasourceFormData.fieldList.splice(index,1)
                        }
                    }
                    
                })
            })
        }
      }else{
          if(!this.indexLists.length){
           this.$message({
              message: '请选择要删除的数据',
              type: 'warning'
            })
            return
        }else{
          this.$confirm(`确定要进行删除操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                this.indexLists.forEach(iten=>{
                    if(iten.onlyId){
                        const index=this.datasourceFormData.indexList.findIndex(v=>v.onlyId===iten.onlyId)
                        if(index>=0){
                          this.datasourceFormData.indexList.splice(index,1)
                        }
                    }
                    if(iten.id){
                        const index=this.datasourceFormData.indexList.findIndex(v=>v.id===iten.id)
                        if(index>=0){
                          this.datasourceFormData.indexList.splice(index,1)
                        }
                    }
                    
                })
            })
        }
      }
    },
    handleCopy(){
        this.$refs.numberValidateForm.validate(async (valid) => {
           if (valid) {
               const res= await tableconfigcopy(this.numberValidateForm)
               if(res?.code===200){
                   this.$message({
                    message: '复制成功',
                    type: 'success'
                  })
                  this.dialogcpoyVisible=false
                   this.getList()
               }
           }
       })
    },
    handleCommand(command,row){
       if(command==="a"){
           this.dialogdbVisible=true
           this.dbradio=0
           
       }else if(command==="b"){
           this.dialogcpoyVisible=true
           this.numberValidateForm.id=row.id
       }else{
          this.$confirm(`确定要进行删除操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                const res = await tableconfigdelete(row.id)
                if (res?.code===200) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.getList()
                }
            })
       }
       this.lineId=row.id
    },
    // 获取表格数据
    datasourceLists() {
      datasourceLists().then(response => {
        this.sortOptions = response.data
      })
    },
    async getList(){
        this.tableLists=[]
        this.total=0
        this.listLoading = true
       const res=await tableconfigfindPage(this.form)
       if(res?.code===200){
          this.tableLists=res.data.list
          this.total = res.data.totalCount
          this.tableLists.forEach(item => {
            if(item.createTime){
              item.create_Time=parseTime(item.createTime)
            }
        })
       }
       this.listLoading = false
    },
    // 重新获取表格数据 页码归为1
    handleFilter() {
      this.form.page = 1
      this.getList()
    },
    handleReset() {
      this.form = {
        name: '',
        dbId:"",
        page: 1,
        limit: 20
      }
      this.getList()
    },
    onDataSourceAdd() {
      this.isDisabled = false
      this.datasourceTitle = '新增'
      this.datasourceDlgShow = true
      this.activeName="dbAttribute"
      this.datasourceFormData={
        table:{
            
        },
        fieldList:[
            {
                name:"id",
                remark:"主键",
                length:0,
                decimals:0,
                defaultValue:"",
                type:"Int",
                primaryKey:true,
                allowNull:false,
                onlyId:this.algorithm()
            },
            {
                name:"create_user_name",
                remark:"创建人",
                length:200,
                decimals:0,
                defaultValue:"",
                type:"Varchar",
                primaryKey:false,
                allowNull:true,
                onlyId:this.algorithm()
            },
            {
                name:"create_time",
                remark:"创建日期",
                length:0,
                decimals:0,
                defaultValue:"",
                type:"Datetime",
                primaryKey:false,
                allowNull:true,
                onlyId:this.algorithm()
            },
            {
                name:"update_user_name",
                remark:"更新人",
                length:200,
                decimals:0,
                defaultValue:"",
                type:"Varchar",
                primaryKey:false,
                allowNull:true,
                onlyId:this.algorithm()
            },
             {
                name:"update_time",
                remark:"更新日期",
                length:0,
                decimals:0,
                defaultValue:"",
                type:"Datetime",
                primaryKey:false,
                allowNull:true,
                onlyId:this.algorithm()
            },
            {
                name:"create_user_id",
                remark:"创建人ID",
                length:0,
                decimals:0,
                defaultValue:"",
                type:"Bigint",
                primaryKey:false,
                allowNull:true,
                onlyId:this.algorithm()
            },
            {
                name:"update_user_id",
                remark:"修改人ID",
                length:0,
                decimals:0,
                defaultValue:"",
                type:"Bigint",
                primaryKey:false,
                allowNull:true,
                onlyId:this.algorithm()
            },
        ],
        indexList:[]
      }
      console.log(this.datasourceFormData.fieldList.map(item=>item.onlyId),200)
      
    },
    //生成唯一标识
    algorithm(){
      let abc=['a','b','c','d','e','f','g','h','i','g','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
      let [max,min]=[Math.floor(Math.random()*(10-7+1)+1),Math.floor(Math.random()*(17-10+1)+17)];
      abc=abc.sort(()=>0.4-Math.random()).slice(max,min).slice(0,8).join("");
      var a=new Date().getTime()+abc;
      return a
    },
    async tableconfiginfo(id){
        const res=await tableconfiginfo(id)
        if(res?.code===200){
           this.datasourceFormData=JSON.parse(JSON.stringify(res.data))
           this.datasourceFormData?.indexList?.forEach(item=>{
            this.$set(item,"filedName",item.filed.split(","))
           })
        }
    },
     handleLook(item) {
      this.isDisabled = true
      this.datasourceDlgShow = true
      this.datasourceTitle = '查看'
      this.activeName="dbAttribute"
      this.datasourceFormData={
        table:{
        },
        fieldList:[
        ],
        indexList:[]
      }
      this.tableconfiginfo(item.id)
    },
    handleUpdate(item) {
      this.isDisabled = false
      this.datasourceDlgShow = true
      this.datasourceTitle = '编辑'
      this.activeName="dbAttribute"
      this.datasourceFormData={
        table:{
        },
        fieldList:[
        ],
        indexList:[]
      }
      this.tableconfiginfo(item.id)
    },
    async handleDB() {
        const res= await tableconfigsyncTable({
            tableId:this.lineId,
            isForceSync:this.dbradio
        })
        if(res?.code===200){
            this.$message({
                message: '同步成功',
                type: 'success'
            })
            this.dialogdbVisible=false
            this.getList()
        }
    },
    onDatasourceSave() {
      this.$refs.datasourceForm.validate(async (valid) => {
        if (valid) {
            this.datasourceFormData.indexList.forEach(item=>{
              item.filed=item.filedName.join()
            })
            if (this.datasourceTitle == '编辑') {
              const res1 =await tableconfigupdate(this.datasourceFormData)
              if(res1?.code===200){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.datasourceDlgShow = false
                this.getList()
              }   
            }else{
               const res2 =await tablesave(this.datasourceFormData)
                if(res2?.code===200){
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  })
                  this.datasourceDlgShow = false
                  this.getList()
                }
            }
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
//表格布局的注释：
//$rowLength 这个变量表示了 筛选的搜索框会有多少行，由于在不同宽度显示器下 所占行数会不一定 ，所以下面使用媒体查询 做兼容
//最小兼容至 1366
@import '~@/styles/layout-table.scss';
$rowLength: 2;
@media all and (min-width: 1659px) {
    $rowLength: 2;
    @include calculation($rowLength: $rowLength);
}
@media all and (max-width: 1659px) {
    $rowLength: 3;
    @include calculation($rowLength: $rowLength);
}
::v-deep .elTablecLASS .el-form-item--mini .el-form-item__content{
        margin-left: 0px!important;
}
::v-deep .elTablecLASS .el-form-item--mini.el-form-item{
    padding-top: 15px;
}
// ::v-deep .el-tabs__nav-scroll{
//   pointer-events: auto!important;
// }
</style>

